<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app">
        <el-row class="app-row">
            <el-col :span="12" class="app-item app-left">
                <div class="phone-w" :style="'background-color:'+bjData.backgroundColor+';'">
                    <div class="phone-n">
                        <img class="max-bj" v-if="bjData.imgUrl!='' && bjData.imgUrl!=null" :src="bjData.imgUrl" alt="">
                        <div class="main">
                            <!-- 模板 -->
                            <div v-for="(item,index) in modules" :key="'mb'+index">
                                <div class="mb" v-if="item.type==1" v-on:click="zhunzong(item.tabName)"
                                    :style="'width:'+item.width+'px;min-height:'+item.height+'px;background-color:'+item.backgroundColor+';margin:'+item.margin+';margin-top:'+item.marginTop+'px;margin-left:'+item.marginLeft+'px;padding-top:'+item.paddingTop+'px;padding-left:'+item.paddingLeft+'px;padding-right:'+item.paddingRight+'px;color:'+item.color+';'">
                                    <!-- 文本 -->
                                    <div v-html="item.children.text"></div>
                                </div>
                                <div class="mb" v-if="item.type==2" v-on:click="zhunzong(item.tabName)"
                                    :style="'width:'+item.width+'px;min-height:'+item.height+'px;background-color:'+item.backgroundColor+';margin:'+item.margin+';margin-top:'+item.marginTop+'px;margin-left:'+item.marginLeft+'px;padding-top:'+item.paddingTop+'px;padding-left:'+item.paddingLeft+'px;padding-right:'+item.paddingRight+'px;color:'+item.color+';text-align:'+item.children.textAlign">
                                    <!-- 图片 -->
                                    <img v-if="item.children.imgUrl!=''" :src="item.children.imgUrl"
                                        v-on:click="tz(item.children.href)" alt=""
                                        :style="'height:'+item.children.height+'px;width:'+item.children.width+'px;'">
                                </div>
                                <div class="mb" v-if="item.type==3" v-on:click="zhunzong(item.tabName)"
                                    :style="'width:'+item.width+'px;min-height:'+item.height+'px;background-color:'+item.backgroundColor+';margin:'+item.margin+';margin-top:'+item.marginTop+'px;margin-left:'+item.marginLeft+'px;padding-top:'+item.paddingTop+'px;padding-left:'+item.paddingLeft+'px;padding-right:'+item.paddingRight+'px;color:'+item.color+';'">
                                    <!-- 视频文字 -->
                                    <img v-if="item.type>=3 && item.bjImgUrl" :src="item.bjImgUrl" alt=""
                                        style="width: 100%;">
                                    <!-- 视频在左文字在又 -->
                                    <div class="mb-main layui-row" v-if="item.type==3">
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.video.width+'px;margin:'+item.video.margin+';margin-top:'+item.video.marginTop+'px;margin-left:'+item.video.marginLeft+'px;'">
                                                <!-- 视频 -->
                                                <div style="width: 100%;">
                                                    <img v-if="item.video.imgUrl" :src="item.video.imgUrl"
                                                        style="width: 100%;" alt="" v-on:click="tz(item.video.href)">
                                                </div>
                                                <!-- 按钮 -->
                                                <div style="text-align: center;">
                                                    <img v-if="item.video.button.imgUrl"
                                                        :style="'width:'+item.video.button.width+'px;margin:0 auto;margin-top:'+item.video.button.marginTop+'px;'"
                                                        :src="item.video.button.imgUrl" alt=""
                                                        v-on:click="tz(item.video.button.href)">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 文字 -->
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.characters.width+'px;margin:'+item.characters.margin+';margin-top:'+item.characters.marginTop+'px;margin-left:'+item.characters.marginLeft+'px;'">
                                                <div v-html="item.characters.text"></div>
                                                <div style="text-align: center;">
                                                    <img v-if="item.characters.button.imgUrl"
                                                        :style="'width:'+item.characters.button.width+'px;margin:0 auto;margin-top:'+item.characters.button.marginTop+'px;'"
                                                        :src="item.characters.button.imgUrl" alt=""
                                                        v-on:click="tz(item.characters.button.href)">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="mb" v-if="item.type==4" v-on:click="zhunzong(item.tabName)"
                                    :style="'width:'+item.width+'px;min-height:'+item.height+'px;background-color:'+item.backgroundColor+';margin:'+item.margin+';margin-top:'+item.marginTop+'px;margin-left:'+item.marginLeft+'px;padding-top:'+item.paddingTop+'px;padding-left:'+item.paddingLeft+'px;padding-right:'+item.paddingRight+'px;color:'+item.color+';'">
                                    <!-- 视频文字 -->
                                    <img v-if="item.type>=3 && item.bjImgUrl" :src="item.bjImgUrl" alt=""
                                        style="width: 100%;">
                                    <!-- 文字在左视频在右 -->
                                    <div class="mb-main layui-row" v-if="item.type==4">
                                        <!-- 文字 -->
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.characters.width+'px;margin:'+item.characters.margin+';margin-top:'+item.characters.marginTop+'px;margin-left:'+item.characters.marginLeft+'px;'">
                                                <div v-html="item.characters.text"></div>
                                                <div style="text-align: center;">
                                                    <img v-if="item.characters.button.imgUrl"
                                                        :style="'width:'+item.characters.button.width+'px;margin:0 auto;margin-top:'+item.characters.button.marginTop+'px;'"
                                                        :src="item.characters.button.imgUrl" alt=""
                                                        v-on:click="tz(item.characters.button.href)">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.video.width+'px;margin:'+item.video.margin+';margin-top:'+item.video.marginTop+'px;margin-left:'+item.video.marginLeft+'px;'">
                                                <!-- 视频 -->
                                                <div style="width: 100%;">
                                                    <img v-if="item.video.imgUrl" :src="item.video.imgUrl"
                                                        style="width: 100%;" alt="" v-on:click="tz(item.video.href)">
                                                </div>
                                                <!-- 按钮 -->
                                                <div style="text-align: center;">
                                                    <img v-if="item.video.button.imgUrl"
                                                        :style="'width:'+item.video.button.width+'px;margin:0 auto;margin-top:'+item.video.button.marginTop+'px;'"
                                                        :src="item.video.button.imgUrl" alt=""
                                                        v-on:click="tz(item.video.button.href)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb" v-if="item.type==5" v-on:click="zhunzong(item.tabName)"
                                    :style="'width:'+item.width+'px;min-height:'+item.height+'px;background-color:'+item.backgroundColor+';margin:'+item.margin+';margin-top:'+item.marginTop+'px;margin-left:'+item.marginLeft+'px;padding-top:'+item.paddingTop+'px;padding-left:'+item.paddingLeft+'px;padding-right:'+item.paddingRight+'px;color:'+item.color+';'">
                                    <!-- 视频文字 -->
                                    <img v-if="item.type>=3 && item.bjImgUrl" :src="item.bjImgUrl" alt=""
                                        style="width: 100%;">
                                    <!-- 双视频 -->
                                    <div class="mb-main layui-row" v-if="item.type==5">
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.video.width+'px;margin:'+item.video.margin+';margin-top:'+item.video.marginTop+'px;margin-left:'+item.video.marginLeft+'px;'">
                                                <!-- 视频 -->
                                                <div style="width: 100%;">
                                                    <img v-if="item.video.imgUrl" :src="item.video.imgUrl"
                                                        style="width: 100%;" alt="" v-on:click="tz(item.video.href)">
                                                </div>
                                                <!-- 按钮 -->
                                                <div style="text-align: center;">
                                                    <img v-if="item.video.button.imgUrl"
                                                        :style="'width:'+item.video.button.width+'px;margin:0 auto;margin-top:'+item.video.button.marginTop+'px;'"
                                                        :src="item.video.button.imgUrl" alt=""
                                                        v-on:click="tz(item.video.button.href)">
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 视频2 -->
                                        <div class="layui-col-md6 mb-item">
                                            <div
                                                :style="'width:'+item.video2.width+'px;margin:'+item.video2.margin+';margin-top:'+item.video2.marginTop+'px;margin-left:'+item.video2.marginLeft+'px;'">
                                                <!-- 视频 -->
                                                <div style="width: 100%;">
                                                    <img v-if="item.video2.imgUrl" :src="item.video2.imgUrl"
                                                        style="width: 100%;" alt="" v-on:click="tz(item.video2.href)">
                                                </div>
                                                <!-- 按钮 -->
                                                <div style="text-align: center;">
                                                    <img v-if="item.video2.button.imgUrl"
                                                        :style="'width:'+item.video2.button.width+'px;margin:0 auto;margin-top:'+item.video2.button.marginTop+'px;'"
                                                        :src="item.video2.button.imgUrl" alt=""
                                                        v-on:click="tz(item.video2.button.href)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" class="app-item app-left">
                <div style="padding: 10px 15px;">
                    <el-button v-on:click="addSelectModule" size="small">添加模块</el-button>
                    <el-button style="float: right;" size="small" type="primary" v-on:click="moduleSave"><i class="el-icon-refresh"></i>保存</el-button>
                </div>
                <el-tabs v-model="tabName" type="card" v-on:tab-remove="removeTab">
                    <el-tab-pane label="背景" :name="'0'" :closable="false">
                        <el-form ref="form" :model="bjData" label-width="100px">
                            <el-form-item label="背景颜色">
                                <el-color-picker v-model="bjData.backgroundColor" show-alpha></el-color-picker>
                            </el-form-item>
                            <el-form-item label="背景图片">
                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                    :list-type="'text'" :file-list="bjImg" :auto-upload="false"
                                    :on-change="maxBJChangeImage" :on-remove="maxbjhandleRemove"
                                    :on-exceed="maxBjexceedImage">
                                    <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane :label="'模块'+(index+1)" :name="item.tabName" v-for="(item,index) in modules"
                        :key="'tabtopmb'+item.tabName" closable style="padding: 5px;">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span v-text="'模块'+(index+1)"></span>
                                <span style="float: right;" v-text="moduleType(item.type)"></span>
                            </div>
                            <div class="text item">
                                <el-divider content-position="left">模块属性</el-divider>
                                <el-form :ref="'form'+index" :model="item" label-width="100px">
                                    <el-form-item label="背景颜色">
                                        <el-color-picker v-model="item.backgroundColor" show-alpha></el-color-picker>
                                    </el-form-item>
                                    <el-form-item label="背景图片" v-if="item.type>=3">
                                        <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                            :list-type="'text'" :file-list="item.bjImg" :auto-upload="false"
                                            :on-change="function(file,fileList){bJChangeImage(file,fileList,item)}"
                                            :on-remove="function(file,fileList){bjhandleRemove(file,fileList,item)}"
                                            :on-exceed="baseexceedImage">
                                            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="宽">
                                        <el-input-number v-model="item.width" :min="0" :max="360" label="宽">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="高">
                                        <el-input-number v-model="item.height" :min="0" label="高"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="居中">
                                        <el-switch v-model="item.margin" v-on:change="mbjzChange(item)"
                                            active-text="发生变化会把外边距-上归零" active-value="0 auto"
                                            inactive-value="undefined">
                                        </el-switch>
                                    </el-form-item>
                                    <el-form-item label="外边距-上">
                                        <el-input-number v-model="item.marginTop" :min="0" label="外边距-上">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="外边距-左">
                                        <el-input-number v-model="item.marginLeft" :min="0" :max="360" label="外边距-左">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="内边距-上">
                                        <el-input-number v-model="item.paddingLeft" :min="0" label="内边距-上">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="内边距-左">
                                        <el-input-number v-model="item.paddingLeft" :min="0" :max="360" label="内边距-左">
                                        </el-input-number>
                                    </el-form-item>
                                </el-form>

                                <el-divider content-position="left">内容属性</el-divider>
                                <el-form :model="item" label-width="100px" v-if="item.type==1">
                                    <el-form-item label="文字内容">
                                        <!-- 富文本 -->
                                        <div :id="'mzifwb'+item.tabName"></div>
                                    </el-form-item>
                                </el-form>
                                <el-form :model="item" label-width="100px" v-else-if="item.type==2">
                                    <el-form-item label="文字内容">
                                        <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                            :list-type="'text'" :file-list="item.children.bjImg" :auto-upload="false"
                                            :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.children)}"
                                            :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.children)}"
                                            :on-exceed="baseexceedImage">
                                            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="宽" v-if="item.children.imgUrl">
                                        <el-input-number v-model="item.children.width" :min="0" :max="360" label="宽">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="高" v-if="item.children.imgUrl">
                                        <el-input-number v-model="item.children.height" :min="0" label="高">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item label="链接地址" v-if="item.children.imgUrl">
                                        <el-input type="textarea" :rows="2" placeholder="如：https://www.baidu.com"
                                            v-model="item.children.href">
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form :model="item" label-width="100px" v-else-if="item.type==3">
                                    <el-tabs v-model="swtabName">
                                        <el-tab-pane label="视频区" name="sp">
                                            <el-divider content-position="left">视频</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.video.margin"
                                                    v-on:change="mbjzChange(item.video)" active-text="发生变化会把外边距-上归零"
                                                    active-value="0 auto" inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.marginTop" :min="0" label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.video.marginLeft" :min="0" :max="360"
                                                    label="外边距-左">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com" v-model="item.video.href">
                                                </el-input>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.button.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.video.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                        <el-tab-pane label="文字区" name="wz">
                                            <el-divider content-position="left">文字</el-divider>
                                            <el-form-item label="文字内容">
                                                <!-- 富文本 -->
                                                <div :id="'sp-zifxk'+item.tabName"></div>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.characters.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.characters.margin"
                                                    v-on:change="mbjzChange(item.characters)"
                                                    active-text="发生变化会把外边距-上归零" active-value="0 auto"
                                                    inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.characters.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.characters.marginLeft" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.characters.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.characters.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.characters.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.characters.button.width" :min="0"
                                                    :max="360" label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.characters.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.characters.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-form>
                                <el-form :model="item" label-width="100px" v-else-if="item.type==4">
                                    <el-tabs v-model="wstabName">
                                        <el-tab-pane label="文字区" name="wz">
                                            <el-divider content-position="left">文字</el-divider>
                                            <el-form-item label="文字内容">
                                                <!-- 富文本 -->
                                                <div :id="'sp-zifxk'+item.tabName"></div>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.characters.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.characters.margin"
                                                    v-on:change="mbjzChange(item.characters)"
                                                    active-text="发生变化会把外边距-上归零" active-value="0 auto"
                                                    inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.characters.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.characters.marginLeft" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.characters.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.characters.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.characters.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.characters.button.width" :min="0"
                                                    :max="360" label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.characters.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.characters.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                        <el-tab-pane label="视频区" name="sp">
                                            <el-divider content-position="left">视频</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.video.margin"
                                                    v-on:change="mbjzChange(item.video)" active-text="发生变化会把外边距-上归零"
                                                    active-value="0 auto" inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.marginTop" :min="0" label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.video.marginLeft" :min="0" :max="360"
                                                    label="外边距-左">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com" v-model="item.video.href">
                                                </el-input>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.button.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.video.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-form>
                                <el-form :model="item" label-width="100px" v-else-if="item.type==5">
                                    <el-tabs v-model="sstabName">
                                        <el-tab-pane label="视频区1" name="sp1">
                                            <el-divider content-position="left">视频</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.video.margin"
                                                    v-on:change="mbjzChange(item.video)" active-text="发生变化会把外边距-上归零"
                                                    active-value="0 auto" inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.marginTop" :min="0" label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.video.marginLeft" :min="0" :max="360"
                                                    label="外边距-左">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com" v-model="item.video.href">
                                                </el-input>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video.button.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.video.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                        <el-tab-pane label="视频区2" name="sp2">
                                            <el-divider content-position="left">视频</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video2.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video2)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video2)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video2.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="居中">
                                                <el-switch v-model="item.video2.margin"
                                                    v-on:change="mbjzChange(item.video2)" active-text="发生变化会把外边距-上归零"
                                                    active-value="0 auto" inactive-value="undefined">
                                                </el-switch>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video2.marginTop" :min="0" label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-左">
                                                <el-input-number v-model="item.video2.marginLeft" :min="0" :max="360"
                                                    label="外边距-左">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com" v-model="item.video2.href">
                                                </el-input>
                                            </el-form-item>
                                            <el-divider content-position="left">按钮</el-divider>
                                            <el-form-item label="上传图片" v-if="item.type>=3">
                                                <el-upload class="upload-demo" ref="upload" action="https://" :limit="1"
                                                    :list-type="'text'" :file-list="item.video2.button.bjImg"
                                                    :auto-upload="false"
                                                    :on-change="function(file,fileList){childrenChangeImage(file,fileList,item.video2.button)}"
                                                    :on-remove="function(file,fileList){childrenhandleRemove(file,fileList,item.video2.button)}"
                                                    :on-exceed="baseexceedImage">
                                                    <el-button slot="trigger" size="small" type="primary">选取图片
                                                    </el-button>
                                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                </el-upload>
                                            </el-form-item>
                                            <el-form-item label="宽">
                                                <el-input-number v-model="item.video2.button.width" :min="0" :max="360"
                                                    label="宽">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="外边距-上">
                                                <el-input-number v-model="item.video2.button.marginTop" :min="0"
                                                    label="外边距-上">
                                                </el-input-number>
                                            </el-form-item>
                                            <el-form-item label="链接地址">
                                                <el-input type="textarea" :rows="2"
                                                    placeholder="如：https://www.baidu.com"
                                                    v-model="item.video2.button.href">
                                                </el-input>
                                            </el-form-item>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-form>
                            </div>
                        </el-card>

                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/wangEditor.js"></script>
    <script src="./js/mylayui.js"></script>
    <script>
        var appVue = new Vue({
            el: "#app",
            data: {
                // 一开始选中的tab
                tabName: '0',
                tabIndex: 0,
                // 视频文字
                swtabName: 'sp',
                wstabName: 'wz',
                sstabName: 'sp1',
                // 背景图片
                bjImg: [],

                // 背景数据
                bjData: {
                    imgUrl: '',
                    backgroundColor: 'rgba(217,28,28,0.5)'
                },
                modules: []

            },
            mounted() {
                // 生命周期--mounted
                this.initialize();
            },
            methods: {
                // 方法
                initialize: function () {
                    var _this = this;
                    installAll(_this);
                },
                // 点击跳转的方法-------------
                tz: function (url) {
                    console.log('点击了')
                    if (url == null || url.replace(/\s+/g, "") == "") {
                        return;
                    }
                    window.location.href = url;
                },
                // 选择添加的模板
                addSelectModule: function () {
                    layui.use(['layer'], function () {
                        layer.open({
                            type: 2,
                            title: '选择模板',
                            area: ['100%', '100%'],
                            fixed: false, //不固定
                            maxmin: true,
                            content: './selectModule.html'
                        });
                    });
                },
                addModule: function (type) {
                    var _this = this;
                    var tabName = ++_this.tabIndex;
                    _this.modules.push(_this.baseModule(type, tabName + ''));
                    _this.tabName = tabName + '';
                    console.log(_this.modules);
                    _this.$nextTick(function () {
                        var i = _this.modules.length - 1;
                        installOne({
                            type: type,
                            module: _this.modules[i]
                        });
                    });

                },
                // 点击模块追踪的编辑
                zhunzong: function (tabid) {
                    this.tabName = tabid;
                },
                // 最大背景图片删除
                maxbjhandleRemove: function (file, fileList) {
                    this.bjData.imgUrl = "";

                },
                // 最大图片修改
                maxBJChangeImage: function (file, fileList) {
                    var _this = this;
                    this.getBase64(file.raw).then(function (res) {
                        // console.log(res);
                        _this.bjData.imgUrl = res;
                    });
                },
                // 最大图片超出个数限制时
                maxBjexceedImage: function (files, fileList) {
                    this.$message({
                        message: '删除后才能进行修改',
                        type: 'warning'
                    });
                },
                bJChangeImage(file, fileList, item) {
                    var _this = this;
                    this.getBase64(file.raw).then(function (res) {
                        item.bjImgUrl = res;
                    });
                    console.log(_this.modules)
                },
                bjhandleRemove(file, fileList, item) {
                    item.bjImgUrl = '';
                },
                // 上传的变化监听
                childrenChangeImage(file, fileList, item) {
                    var _this = this;
                    this.getBase64(file.raw).then(function (res) {
                        console.log(res);
                        item.imgUrl = res;
                    });
                    console.log(_this.modules)
                },
                // 上传的删除
                childrenhandleRemove(file, fileList, item) {
                    item.imgUrl = '';
                },
                // 通用上传的提示
                baseexceedImage() {
                    this.$message({
                        message: '删除后才能进行修改',
                        type: 'warning'
                    });
                },
                removeTab(targetName) {
                    console.log(targetName);
                    var _this = this;
                    let tabs = _this.modules;
                    let activeName = _this.tabName;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.tabName === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                console.log(nextTab);
                                if (nextTab) {
                                    activeName = nextTab.tabName;
                                } else {
                                    activeName = '0';
                                }
                            }
                        });
                    }
                    _this.tabName = activeName;
                    console.log(activeName);
                    _this.modules = tabs.filter(tab => tab.tabName !== targetName);
                    console.log(_this.modules);

                },
                // 图片转化成base64
                getBase64(file) {
                    return new Promise(function (resolve, reject) {
                        let reader = new FileReader();
                        let imgResult = "";
                        reader.readAsDataURL(file);
                        reader.onload = function () {
                            imgResult = reader.result;
                        };
                        reader.onerror = function (error) {
                            reject(error);
                        };
                        reader.onloadend = function () {
                            resolve(imgResult);
                        };
                    });
                },
                // 监听模板居中
                mbjzChange(item) {
                    if (item.margin == "0 auto") {
                        item.marginTop = undefined;
                        item.marginLeft = undefined;
                    } else {
                        item.marginLeft = 0;
                    }
                    //item.marginTop = 0;
                    // item.marginLeft="";
                    console.log(item.margin);
                },
                moduleSave(){
                    var data={
                        bjData:this.bjData,
                        modules:this.modules
                    };
                    console.log(data);
                    console.log(JSON.stringify(data));
                    alert(JSON.stringify(data));
                }
            },
            computed: {
                // 计算属性


                baseModule: function () {
                    return function (type, tabName) {
                        var data = {
                            type: type,
                            tabName: tabName,
                            bjImg: [], //背景暂存区
                            bjImgUrl: '', //字模板没有背景图片
                            backgroundColor: 'rgba(121,180,253,0.29)',
                            width: 340,
                            height: 350,
                            margin: '0 auto',
                            marginTop: '10',
                            marginLeft: undefined,
                            marginRight: undefined,
                            paddingTop: undefined,
                            paddingLeft: undefined,
                            color: '',
                            //href: '', //跳转的连接
                            // 视频区
                            video: {
                                bjImg: [], //图片暂存区
                                imgUrl: '',
                                width: 120,
                                // height: 150,
                                href: '',
                                margin: '0 auto',
                                marginTop: undefined,
                                marginLeft: undefined,
                                paddingTop: undefined,
                                paddingLeft: undefined,
                                button: {
                                    bjImg: [], //图片暂存区
                                    imgUrl: '',
                                    width: 108,
                                    marginTop: 10,
                                    href: '',
                                }
                            },
                            video2: {
                                bjImg: [], //图片暂存区
                                imgUrl: '',
                                width: 120,
                                // height: 150,
                                href: '',
                                margin: '0 auto',
                                marginTop: undefined,
                                marginLeft: undefined,
                                paddingTop: undefined,
                                paddingLeft: undefined,
                                button: {
                                    bjImg: [], //图片暂存区
                                    imgUrl: '',
                                    width: 108,
                                    marginTop: 10,
                                    href: '',
                                }
                            },
                            // 文字区域
                            characters: {
                                text: '',
                                width: 120,
                                margin: '0 auto',
                                marginTop: undefined,
                                marginLeft: undefined,
                                paddingTop: undefined,
                                paddingLeft: undefined,
                                button: {
                                    bjImg: [], //图片暂存区
                                    imgUrl: '',
                                    width: 108,
                                    marginTop: 10,
                                    href: '',
                                }
                            },
                            // 没有什么用
                            children: {
                                text: '',
                                bjImg: [], //背景暂存区
                                imgUrl: '',
                                width: 100,
                                height: undefined,
                                // textAlign: 'center',
                                href: '',
                            }
                        };
                        return data;
                    }
                },
                moduleType() {
                    return function (type) {
                        switch (type) {
                            case 1:
                            case '1':
                                return "文字模板"
                                break;
                            case 2:
                            case '2':
                                return "图片模板"
                                break;
                            case 3:
                            case '3':
                                return "视频-文字模板"
                                break;
                            case 4:
                            case '4':
                                return "文字-视频模板"
                                break;
                            case '5':
                            case 5:
                                return "视频-视频模板"
                                break;
                        }
                    }
                }

            }
        });
    </script>
</body>

</html>